<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script defer type="module" src="./index.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="./vue.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <div class="container mx-auto px-4 py-8 max-w-5xl">
            <!-- 页面标题 -->
            <header class="mb-8 text-center">
              <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-neutral mb-2">🛒 我的购物车</h1>
            </header>
        
            <!-- 购物车主内容区 -->
            <div class="bg-white rounded-xl p-6 shadow-lg cart-shadow mb-8">
              <!-- 排序控制区 -->
              <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 pb-4 border-b border-gray-200">
                <div class="mb-4 md:mb-0">
                  <span class="text-gray-600 mr-2">排序方式:</span>
                  <select v-model="sortKey" @change="sortProducts" class="px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200">
                    <option value="name">按名称排序</option>
                    <option value="qty">按商品数量排序</option>
                    <option value="price">按商品价格排序</option>
                  </select>
                  <button @click="toggleSortOrder" class="ml-2 text-primary hover:text-primary/80 transition-colors duration-200">
                    <i class="fa fa-sort-amount-asc" :class="sortOrder === 'asc' ? 'fa-sort-amount-asc' : 'fa-sort-amount-desc'"></i>
                  </button>
                </div>
                
                <div class="flex items-center space-x-2">
                  <span class="text-gray-600">商品总数: </span>
                  <span class="font-semibold text-lg text-neutral">{{ totalItems }}</span>
                </div>
              </div>
        
              <!-- 商品列表 -->
              <div class="space-y-4">
                <div v-for="product in cartItems" :key="product.id" class="bg-gray-50 rounded-lg p-4 product-hover">
                  <div class="flex flex-col md:flex-row items-center justify-between">
                    <!-- 商品信息 -->
                    <div class="flex items-center mb-4 md:mb-0">
                      <div class="w-16 h-16 bg-primary/10 rounded-lg flex items-center justify-center mr-4">
                        <i class="fa fa-shopping-bag text-2xl text-primary"></i>
                      </div>
                      <div>
                        <h3 class="font-semibold text-lg text-neutral">{{ product.name }}</h3>
                        <p class="text-gray-500 text-sm">分类: {{ product.category }}</p>
                        <p class="font-medium text-primary mt-1">¥{{ product.price.toFixed(2) }}/件</p>
                      </div>
                    </div>
        
                    <!-- 数量控制 -->
                    <div class="flex items-center mb-4 md:mb-0">
                      <button @click="decreaseQty(product.id)" class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300 transition-colors duration-200">
                        <i class="fa fa-minus text-gray-700"></i>
                      </button>
                      <input 
                        type="number" 
                        v-model.number="product.qty" 
                        min="1" 
                        class="w-16 h-8 mx-2 text-center border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                        @change="updateQty(product.id, $event.target.value)"
                      >
                      <button @click="increaseQty(product.id)" class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300 transition-colors duration-200">
                        <i class="fa fa-plus text-gray-700"></i>
                      </button>
                    </div>
        
                    <!-- 小计和删除 -->
                    <div class="flex items-center">
                      <span class="font-bold text-lg mr-6 text-neutral">¥{{ (product.price * product.qty).toFixed(2) }}</span>
                      <button @click="removeProduct(product.id)" class="text-red-500 hover:text-red-700 transition-colors duration-200">
                        <i class="fa fa-trash-o text-xl"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
        
              <!-- 空购物车状态 -->
              <div v-if="cartItems.length === 0" class="text-center py-12">
                <div class="text-6xl text-gray-300 mb-4">
                  <i class="fa fa-shopping-cart"></i>
                </div>
                <h3 class="text-xl font-medium text-gray-500 mb-2">购物车是空的</h3>
                <p class="text-gray-400">添加一些商品到购物车开始购物吧</p>
              </div>
            </div>
        
            <!-- 结算区域 -->
            <div class="bg-white rounded-xl p-6 shadow-lg cart-shadow">
              <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                  <button @click="clearCart" class="px-6 py-2 border border-red-500 text-red-500 rounded-lg hover:bg-red-50 transition-colors duration-200">
                    <i class="fa fa-trash mr-2"></i>清空购物车
                  </button>
                </div>
                
                <div class="text-right">
                  <p class="text-gray-600 mb-1">商品总价: <span class="font-semibold">¥{{ subtotal.toFixed(2) }}</span></p>
                  <p class="text-gray-600 mb-3">优惠: <span class="font-semibold text-red-500">¥0.00</span></p>
                  <div class="text-xl font-bold text-neutral">
                    总计: <span class="text-2xl">¥{{ totalAmount.toFixed(2) }}</span>
                  </div>
                  <button 
                    @click="checkout" 
                    class="mt-4 px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed"
                    :disabled="cartItems.length === 0"
                  >
                    <i class="fa fa-check-circle mr-2"></i>结算
                  </button>
                </div>
              </div>
            </div>
        
            <!-- 通知提示 -->
            <div v-if="notification.show" class="fixed bottom-4 right-4 bg-neutral text-white px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300" :class="{ '-translate-y-0': notification.show, 'translate-y-20 opacity-0': !notification.show }">
              <p>{{ notification.message }}</p>
            </div>
          </div>
    </div>
    
</body>
</html>